<script setup lang='ts' name="admin-role">
import type { VxeGridInstance, VxeGridListeners } from 'vxe-table'

import { deleteTemplates, getTemplates, switchTemplates } from '@fl/api/ums-api'
import ButtonItem from '@fl/components/button-item.vue'
import { ElButton, ElCard, ElMessage, ElMessageBox, ElPopover, ElSwitch } from 'element-plus'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'

import type { IRowV0 } from './types'

import { useForm } from './hooks/use-form'
import { useTable } from './hooks/use-table'

const router = useRouter()
const { btns, gridOptions } = useTable()
const { form, schema } = useForm()

const detail = ref<any>({})
const xGrid = ref<VxeGridInstance<IRowV0>>()
const switchStatus = computed(() => (data: any) => {
    if (data === 0)
        return true

    else
        return false
})
const gridEvents: VxeGridListeners<IRowV0> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        getData()
    },
}
getData()

async function getData() {
    console.log(form.value)

    gridOptions.loading = true
    getTemplates({
        ...form.value,
        page: gridOptions.pagerConfig.currentPage,
        page_size: gridOptions.pagerConfig.pageSize,
    }).then((res: any) => {
        gridOptions.pagerConfig.total = res.total ?? 0
        gridOptions.data = res?.items ?? []
        gridOptions.loading = false
    })
}
function changSwitch(row: any) {
    let dataStatus = 0
    if (row.data_status === 0)
        dataStatus = -1

    else
        dataStatus = 0

    const option = {
        data_status: dataStatus,
    }
    switchTemplates(row.template_id, option).then(() => {
        getData()
    })
}
function reset() {
    form.value = {
        channel: 'WeChatApp',
        group_id: '',
        order: 'desc',
        scene: '',
        sort_by: 'create_time',
    }
    getData()
}

function doAction(item: any, row: any) {
    if (item.value === 'edit') {
        detail.value = row
        router.push({ path: '/marketing-promotion/message-center-service/message-template/add-wechat-message', query: {
            data: JSON.stringify(detail.value),
            dataGroup: JSON.stringify(detail.value.group),
        } })
    }
    else {
        deleteTemplates(row.template_id).then(() => {
            getData()
        })
    }
}

function doAdd() {
    router.push('/marketing-promotion/message-center-service/message-template/add-wechat-message')
}
</script>

<template>
    <ElCard class="mb-20">
        <PlusForm v-model="form"
                  :row-props="{ gutter: 20 }"
                  :columns="schema"
                  position-relative
        >
            <template #footer>
                <div class="ml-auto"
                     position-absolute
                     right-0
                     top-0
                >
                    <ElButton type="primary"
                              @click="getData"
                    >
                        查询
                    </ElButton>

                    <ElButton @click="reset">
                        重置
                    </ElButton>
                </div>
            </template>
        </PlusForm>
    </ElCard>

    <ElCard>
        <div class="mb-20">
            <ElButton type="primary"
                      @click="doAdd"
            >
                +新建
            </ElButton>
        </div>
        <!-- 列表 -->
        <vxe-grid ref="xGrid"
                  v-bind="gridOptions"
                  v-on="gridEvents"
        >
            <template #data_status="{ row }">
                <ElSwitch :model-value="switchStatus(row.data_status)"
                          @click="changSwitch(row)"
                />
            </template>

            <template #template_content="{ row }">
                <ElPopover placement="bottom"
                           title=""
                           :width="200"
                           trigger="click"
                           :content="row.template_content"
                >
                    <template #reference>
                        <div color="#da0004"
                             cursor-pointer
                        >
                            查看内容
                        </div>
                    </template>
                </ElPopover>
            </template>

            <template #group_name="{ row }">
                <div>
                    {{ row.group?.group_name }}
                </div>
            </template>

            <template #operate="{ row }">
                <ButtonItem :btns="btns"
                            @btn-click="doAction($event, row)"
                />
            </template>
        </vxe-grid>
    </ElCard>
</template>
